<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>
        订单明细单
    </title>
    <style type="text/css">
        body {
            /* font: 14px/1.5 "\5b8b\4f53"; */
            color: #333;
            font-size:14px;
        }

        .print-btn{display: inline-block;*display: inline;*zoom:1;width:96px;height:50px;line-height:50px;background: #e54346;color:#fff;font-family: 'Microsoft YaHei';font-size: 18px;font-weight: bold;border:0;}

        #content {
            width:900px;
            margin: 0 auto;
            /*border:1px solid black;*/
        }

        .v-h {
            margin:20px; border-top:2px solid #ededed; text-align:right; clear:right;
        }
        .down {
            margin:20px; text-align:right; clear:right;
        }

    </style>
    <style type="text/css" media="print">
        .v-h {
            display:none;
        }
    </style>
</head>
<div class="pages">
<div :id="'content'+index" v-for="(o, index) in list" :key="index">
    <div>{{routename||''}}-{{o.ord2 ? o.ord+'-'+o.ord2 : o.ord}}</div>
    <div v-if="!o.station_id">
        <div style="font-size: 18px;
            font-weight: bolder;
            text-align: center;">成都宜鲜生农副产品有限公司<br/>
            商品出库单
        </div>
        <table id="table1" style="width: 100%; margin-top: 20px; margin-bottom: 10px;">
            <tr>
                <th style="text-align: left; width: 90px">订单编号：</th>
                <td>{{o.order_no}}</td>
                <th style="width: 90px">下单时间：</th>
                <td>{{o.create_time}}</td>
            </tr>
            <tr>
                <th style="text-align: left">联 系 人：</th>
                <td>{{o.address.receiver||''}}</td>
                <th>联系电话：</th>
                <td>{{o.address.tel||''}}</td>
            </tr>
            <tr>
                <th style="text-align: left">配送地址：</th>
                <td>{{o.address.province}} {{o.address.city}} {{o.address.district}} {{o.address.detail}}</td>
            </tr>
            <tr>
                <th style="text-align: left">订单留言：</th>
                <td style="font-weight: bolder; text-decoration: underline">{{o.order_memo||''}}</td>
            </tr>
        </table>
    </div>

    <div v-if="o.station_id">
        <div style="font-size: 18px;
            font-weight: bolder;
            text-align: center;">成都宜鲜生农副产品有限公司<br/>
            商品出库单
        </div>
        <table style="width: 100%; margin-top: 20px; margin-bottom: 10px;">
            <tr>
                <th style="text-align: left; width: 90px">订单编号：</th>
                <td>{{o.order_no}}</td>
                <th style="width: 90px">下单时间：</th>
                <td>{{o.create_time||''}}</td>
            </tr>
            <tr>
                <th style="text-align: left">自 提 点：</th>
                <td>{{o.station.station_name||''}}（{{o.station.station_no}}）</td>
                <th>联系电话：</th>
                <td>{{o.station_contact||''}}</td>
            </tr>
            <tr>
                <th style="text-align: left">自提地址：</th>
                <td>{{o.station.station_detail||''}}</td>
            </tr>
            <tr>
                <th style="text-align: left">订单留言：</th>
                <td style="font-weight: bolder; text-decoration: underline">{{o.order_memo||''}}</td>
            </tr>
        </table>
    </div>
    
    <div id="div2">
    <table id="table2" border=1 cellSpacing=0 cellPadding=1 width="100%" style="border-collapse:collapse">
        <thead>
        <tr>
            <th width="8%" height="50px">序号</th>
            <th width="10%">商品编号</th>
            <th width="15%">商品名称</th>
            <th width="20%">商品规格</th>
           
            <th width="10%">产地</th>
            <th width="8%">数量</th>
            <th width="10%">单价</th>
            <th width="10%">金额(元)</th>
        </tr>
        </thead>
        <tbody>
        
        <tr v-for="(p, idx) in o.itemlist" :key="idx">
            <td style="text-align: center;">{{idx+1}}</td>
            <td style="text-align: center">{{p.product_no}}</td>
            <td style="text-align: center">{{p.product_name}}</td>
            <td style="text-align: center">{{p.sku_name}}</td>
            
            <td style="text-align: center">{{p.place_origin}}</td>
            <td style="text-align: center">{{p.amount}} 件</td>
            <td style="text-align: center"><span class="num">{{p.pay_price}}</span></td>
            <td style="text-align: center"><span class="num">{{p.pay_price * p.amount}}</span></td>
        </tr>
       
        </tbody>
    </table>
    </div>
    <div id="div3">
    <table id="table3" style="margin-top:10px;float: right;width: 100%;">
        <tr>
            <th style="text-align: left;width: 65px"><span>运 费：</span></th>
            <td>{{o.freight}} 元</td>
            <th style="text-align: right"><span>积分抵扣：</span>
            <td>{{o.use_point}} 元</td>
            <th style="text-align: right"><span>优惠金额：</span></th>
            <td>{{o.cost_coupon_value||0}} 元</td>
        </tr>
        <tr><th style="text-align: left"><span>合 计：</span></th><td>{{o.total_amount||0}} 元</td></tr>
    </table>
    </div>
    <div id="div4" style="clear: both">
        <hr/>
        <div>开单员：系统管理员</div>
    </div>
    
    <div style="margin-top: 1em">售后申请:商品补差、退运费，请在确认收货后上传出库清单照片，宜鲜生将竭诚为您服务！</div>
    <br/>
</div>
</div>

<div class="down"><a href="/education/download/download.zip">打印控件下载</a></div>
<div class="v-h"><div class="w">
    <input name="" class="print-btn" type="button" value="打印" onclick="javascript:app.printView();"></div></div>
<script language="javascript" src='/education/jsfile/LodopFuncs.js'></script>

<script src="res/vue.js"></script>
<script src="./res/axios.min.js"></script>
<script type="text/javascript">
    Vue.prototype.$axios = axios;   // 2、在vue中使用axios
    var app = new Vue({
        el: '.pages',
        data: {
            list:[],
            prefix: '/education/admin/pages/routeList/',
            //map
            currentIndex: 0,
            count: 0,
            routename:''
        },
        methods: {
            post(url, param) {
                console.log('request param:', param, this.convertObj(param))
                return this.$axios.post(url, this.convertObj(param), {headers:{'Content-Type':'application/x-www-form-urlencoded'}})
            },
            convertObj(data) {
                var _result = [];
                for (var key in data) {
                    var value = data[key];
                    if(value) {
                        if (value.constructor == Array) {
                            value.forEach(function(_value) {
                                _result.push(key + "=" + _value);
                            });
                        } else {
                            _result.push(key + '=' + value);
                        }
                    }
                }
                return _result.join('&');
            },
            loadData() {
                let ids = sessionStorage.getItem('printList_ids')
                let name = sessionStorage.getItem('printList_routename')
                let routeid = sessionStorage.getItem('printList_routeid')
                this.routename = name
                if(!ids) {
                    alert('没有待打印数据')
                    return
                }
                let that = this;
                this.post(this.prefix + 'getPrintOrderList', {ids, routeid}).then(function (rs) {
                    let res = rs.data;
                    if(res.code == 200) {
                        if(res.data !=null) {
                            that.list = res.data;
                            that.$nextTick(()=>{
                                that.printView()
                            })
                        }
                    }
                })
            },
            printView() {
                let list = this.list||[]
                let LODOP=getLodop();
                LODOP.PRINT_INIT("打印-全页");
                for(let i=0; i<list.length; i++) {
                    let div = document.getElementById('content'+i);
                    if(div) {
                        LODOP.ADD_PRINT_HTM(50,"5%","90%","90%",div.innerHTML );
                        LODOP.NewPage();
                    }
                }
                LODOP.PREVIEW();
            }

        }
    })
    window.onload = function () {
        app.loadData()
    }
</script>

</html>